<template>
	<view class="u-p-20">
		<view class="u-p-y-20 bg-white rounded-20 box-shadow">
			<view class="u-p-x-20">
				<view class="flex align-center bg" :style="{ background: 'url('+$_BASE_IMG_API+'/images/orderDetailImage.png)  no-repeat','background-size': '100% 100%'}">
					<text class="u-p-l-20 text-white u-font-26">{{info.status}}</text>
				</view>
				<text class="flex u-m-y-20 font-weight-bold">退款信息</text>
				<view v-for="(item,indey) in info.goodsinfo" :key="indey">
					<view class="flex align-center border-bottom u-p-y-20">
						<order-item-list-good :item="item"></order-item-list-good>
					</view>
				</view>
			</view>
			<view class="flex flex-column u-m-20  u-border-bottom">
				<text class="font-weight-bold">订单信息</text>
				<dy-cell-item leftTitle="退款原因" :title="info.refund_reason" :isRight="false"></dy-cell-item>
				<dy-cell-item v-if="info.type" leftTitle="退款金额" :title="`¥${info.refund_money}`" :isRight="false"></dy-cell-item>
				<dy-cell-item leftTitle="订单备注" :title="info.note" :isRight="false"></dy-cell-item>
				<view class="flex align-center justify-between">
				  <view class="flex-1">
				    <dy-cell-item leftTitle="订单编号" :title="info.order_no" :isRight="false"></dy-cell-item>
				  </view>
				  <u-tag class="u-m-l-30" text="复制" size="mini" @click="$copy(info.order_no)"></u-tag>
				</view>
				<dy-cell-item leftTitle="申请时间" :title="info.createtime" :isRight="false"></dy-cell-item>

				<view class="flex u-p-y-10" v-if="info.pay_img">
					<text class="u-p-r-10">支付凭证：</text>
					<u-image :src="$_BASE_IMG_API + info.pay_img" width="160rpx" height="120rpx"></u-image>
				</view>
				<dy-cell-item leftTitle="退货地址" :title="info.delivery_address" :isRight="false" v-if="info.status_old == 2"></dy-cell-item>
			</view>
			<view class="u-p-x-10 u-m-20" v-if="info.rejectreason">
				<text class="font-weight-bold">拒绝理由：</text>
				<text>{{info.rejectreason}}</text>
			</view>
			<view class="u-m-x-20 flex align-center" v-if="info.status_old == 2">
				<text class="font-weight-bold">快递单号：</text>
				<view class="flex-1 u-p-x-10 rounded-10" style="background-color: #F5F5F5;">
					<u-input v-model="delivery" :placeholder="info.delivery?'等待商家收货': '商家已同意申请, 请尽快回填快递单号'"></u-input>
				</view>
			</view>
			<view class="flex justify-end u-m-t-40">
				<view class="u-p-r-20">
					<dy-button width="140rpx" backgroundColor="#fd644f" borderColor="#fd644f" color="#fff" v-if="info.status_old == 2" @click="_afterSaleStics">提交</dy-button>
					<dy-button width="140rpx" backgroundColor="#fd644f" borderColor="#fd644f" color="#fff" v-if="info.status_old == 1" @click="cancle">取消申请</dy-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { OrderCenterApi } from '@/api/serves.js'
	export default {
		data() {
			return {
				paramsInfo: {},
				info: '',
				delivery: '' ,   // 回填快递单号
			};
		},
		onLoad(options) {
			console.log('options', options);
			let paramsInfo = JSON.parse(options.info)
			this.paramsInfo = paramsInfo
			this._getRefunddetail()
		},
		methods: {
			_getRefunddetail() {
				this.$ShowLoading()
				OrderCenterApi.get_refunddetail(this.paramsInfo).then(res=> {
					this.$HideLoading()
					console.log('售后订单详情', res);
					if(res.code == 1){
						this.info = res.data
						this.info.goodsinfo.forEach(item=> {
							item.images = item.images
						})
					}else {
						this.$Toast(res.msg)
					}
				})
			},
			// 回填，提交
			_afterSaleStics() {
				let reg = /^[A-Za-z0-9]+$/
				if(!reg.test(this.delivery)) return this.$u.toast('输入正确的快递号')
				this.$ShowLoading()
				OrderCenterApi.after_saleStics({order_no: this.paramsInfo.order_no, delivery: this.delivery}).then(res=> {
					this.$HideLoading()
					console.log('回填，提交', res);
					if(res.code == 1){
						uni.navigateBack()
						uni.$emit('itemClick')
					}else {
						this.$u.toast(res.msg, 3000)
					}
				})
			},
			cancle() {
				this.$ShowLoading()
				OrderCenterApi.cancel_sale({id: this.paramsInfo.id}).then(res=> {
					this.$HideLoading()
					console.log('取消售后', res);
					if(res.code == 1){
						// this.info = res.data
						uni.navigateBack()
					}else {
						this.$Toast(res.msg)
					}
				})
			},
		}
		
	}
</script>

<style lang="scss" scoped>
.bg {
	width: 668rpx;
	height: 170rpx;
}
</style>
